<h1>Example Usage of jQuery.loadTemplate</h1>
<h2>Example of loading an html template from the application</h2>
<p>Loading Multiple posts into a single container. Templates loaded from an external source</p>
<div class="simple-template-container"></div>
<p>Loading single post into single container. Templates loaded from an external source</p>
<div class="simple-template-container-single"></div>
<h2>Example of loading a template from a script tag within the same document.</h2>
<p>Loading a single post into multiple containers. Templates loaded from within the page.</p>
<div class="script-template-container"></div>
<div class="script-template-container"></div>

<!-- Template -->
<script type="text/html" id="template">
    <img data-src="authorPicture" data-alt="author" data-link-wrap="authorPicture"/>
    <div class="post-container">
        <div data-content="author"></div>
        <div data-content="date"></div>
        <div data-content="post" data-format="sameCaseFormatter" data-format-options="upper"></div>
    </div>
</script>

<script type="text/javascript">
	$(function() {
        // Set our data for the post
        var post = {
                author: 'Joe Bloggs',
                date: '25th May 2013',
                authorPicture: 'SimpleExample/img/joeBloggs.gif',
                options: [{value:1, content:'test'}, {value: 2, content: 'test2'}],
                post: 'This is the contents of my post'
            }

            var posts = [
                post,
                {
                    author: 'Joe Bloggs 2',
                    date: '28th May 2013',
                    authorPicture: 'SimpleExample/img/joeBloggs.gif',
                    options: [{value:3, content:'test3'}, {value: 4, content: 'test4'}, {value:5, content:'test5'}, {value: 6, content: 'test6'}],
                    post: 'This is the contents of my other post'
                }
            ]

        $.addTemplateFormatter({
            upperCaseFormatter : function(value, template) {
                    return value.toUpperCase();
                },
            lowerCaseFormatter : function(value, template) {
                    return value.toLowerCase();
                },
            sameCaseFormatter : function(value, template) {
                    if(template == "upper") {
					    return value.toUpperCase();
				    } else {
					    return value.toLowerCase();
				    }
                }
        });

        // Load template from our templates folder,
        // and populate the data from the post object.
		$(".simple-template-container").loadTemplate("SimpleExample/Templates/simple.html", posts);

        // Load template from our templates folder,
        // and populate the data from the post object.
		$(".simple-template-container-single").loadTemplate("SimpleExample/Templates/simple.html", post);

        // Load template from element on same page,
        // and populate the data from the post object.
        $(".script-template-container").loadTemplate("#template", post);
	});
</script>